<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Table :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="room">
                  <tag>二诊</tag><tag>三诊</tag>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" title="编辑" @on-ok="handleSubmit" @on-cancel="handleDrawerCancel">
            <Form :model="formItem" :label-width="80">
                <FormItem label="名称">
                    刘丹
                </FormItem>
                <FormItem label="诊室" required>
                    <Select v-model="formItem.director" multiple>
                        <Option value="一诊">一诊</Option>
                        <Option value="二诊">二诊</Option>
                        <Option value="三诊">三诊</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'diagnosis',
        data () {
            return {
                modal: false,
                formItem: {
                    input: '',
                    director: '',
                    switch: true
                },
                columns: [
                    {
                        title: '客服人员',
                        key: 'name'
                    },
                    {
                        title: '诊室',
                        key: 'room',
                        slot: 'room'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        name: '刘丹',
                        room: '王艳/高玲'
                    },
                    {
                        name: '时宜',
                        room: '王艳'
                    }
                ]
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
            },
            handleSubmit () {
                this.$Message.success('操作成功!');
            }
        }
    }
</script>

<style scoped>
</style>
